<!--
 * @Author: 369886629@qq.com 369886629@qq.com
 * @Date: 2025-03-07 11:36:53
 * @LastEditors: 369886629@qq.com 369886629@qq.com
 * @LastEditTime: 2025-03-07 11:39:02
 * @FilePath: \sqeybusiness-h5\src\components\AreaSelector.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
    <van-dropdown-menu v-model:active="activeIndex">
        <van-dropdown-item
        title="点击从下拉面板中选择省份"
        :options="provinceOptions"
        @select="handleProvinceSelect"
        ></van-dropdown-item>
        <van-dropdown-item
        title="城市"
        :options="cityOptions"
        :disabled="!selectedProvince"
        ></van-dropdown-item>
        <van-dropdown-item
        title="区县"
        :options="countyOptions"
        :disabled="!selectedCity"
        ></van-dropdown-item>
        <van-dropdown-item title="全国"></van-dropdown-item>
    </van-dropdown-menu>
    <div v-if="selectedProvince">当前选择的省份: {{ selectedProvince }}</div>
    <div v-if="selectedCity">当前选择的城市: {{ selectedCity }}</div>
    <div v-if="selectedCounty">当前选择的区县: {{ selectedCounty }}</div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      provinceOptions: [
        { text: '安徽省', value: '安徽省' },
        { text: '北京市', value: '北京市' },
        { text: '重庆市', value: '重庆市' },
        // 此处省略其他省份，可按需求补充完整
        { text: '台湾省', value: '台湾省' },
        { text: '香港特别行政区', value: '香港特别行政区' },
        { text: '澳门特别行政区', value: '澳门特别行政区' }
      ],
      cityOptions: [],
      countyOptions: [],
      selectedProvince: '',
      selectedCity: '',
      selectedCounty: ''
    }
  },
  methods: {
    handleProvinceSelect(option) {
      this.selectedProvince = option.value
      // 这里可以根据选择的省份去加载对应的城市数据，示例中先清空城市和区县选项
      this.cityOptions = []
      this.countyOptions = []
      this.selectedCity = ''
      this.selectedCounty = ''
    }
  }
}
</script>

<style scoped>
/* 可根据需要自定义样式 */
</style>
